<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>desk</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../font/iconfont.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/desk.css">
    <link rel="stylesheet" href="../css/ranking_list.css">
</head>
<body>
<div class="web is-friend">
    <audio src="../media/bgm.mp3" autoplay loop></audio>
    <i class="iconfont music icon-music"></i>
    <a href="index.html" class="iconfont icon-shouye back-start show-i"></a>
    <i class="tips">这个位置已经有人了</i>

    <div class="desk-box">
        <div class="box clearfix">
            <!--主宾桌-->
            <div class="wrapper-big">
                <div class="center"><span>主宾桌</span></div>
                <div class="circle"><i class="iconfont icon-yonghu"></i></div>
                <div class="circle"><i class="iconfont icon-yonghu"></i></div>
                <div class="circle"><i class="iconfont icon-yonghu"></i></div>
                <div class="circle"><i class="iconfont icon-yonghu"></i></div>
                <div class="circle"><i class="iconfont icon-yonghu"></i></div>
                <div class="circle"><i class="iconfont icon-yonghu"></i></div>
            </div>
            <!--第一桌-->
            <div class="wrapper zoom-in">
                <div class="center"><span>第<em>1</em>席</span></div>
                <div class="circle"><i class="iconfont icon-yonghu"></i></div>
                <div class="circle"><i class="iconfont icon-yonghu"></i></div>
                <div class="circle"><i class="iconfont icon-yonghu"></i></div>
                <div class="circle"><i class="iconfont icon-yonghu"></i></div>
                <div class="circle"><i class="iconfont icon-yonghu"></i></div>
                <div class="circle"><i class="iconfont icon-yonghu"></i></div>
            </div>
            <!--添加-->
            <div class="wrapper wrapper-add">
                <div class="center"><i class="iconfont icon-jia1"></i></div>
                <div class="circle"><i class="iconfont icon-yonghu"></i></div>
                <div class="circle"><i class="iconfont icon-yonghu"></i></div>
                <div class="circle"><i class="iconfont icon-yonghu"></i></div>
                <div class="circle"><i class="iconfont icon-yonghu"></i></div>
                <div class="circle"><i class="iconfont icon-yonghu"></i></div>
                <div class="circle"><i class="iconfont icon-yonghu"></i></div>
            </div>
            <div class="tp-bg zoom-out">
                <div class="word_tips">
                    <p>您已成功入席</p>
                    <p>您的座位是第<em>1</em>桌第<em></em>位</p>
                </div>
            </div>
        </div>
        <!--文字-->
        <div class="word">
            <p>您是第<em>1</em>位宾客,目前已有<em>0</em>位宾客入席</p>
        </div>
        <!-----------弹窗---------------->
        <div id="button-pop" class="back">
            <div class="pop_box">
                <div class="pop_up popshow">
                    <p>欢迎来到<em>小李</em>的囍宴</p>
                    <input class="btn btn_wth_222 close" type="button" value="我要入席"/>
                    <input id="show-ranking" class="btn btn_wth_222" type="button" value="查看囍宴排行榜"/>
                    <a href="index.html"><input class="btn btn_wth_222" type="button" value="我也要定制我的囍宴"/></a>
                    <span class="close iconfont icon-cancel"></span>
                </div>
            </div>
        </div>
        <!-----------引导分享弹窗---------------->
        <div id="wish-pop" class="back hide">
            <div class="pop_box">
                <div class="pop_up">
                    <p>为Ta收集更多新婚祝福！</p>
                    <span class="close iconfont icon-cancel"></span>
                </div>
            </div>
        </div>
        <!-----------弹窗3---------------->
        <div id="dissatisfy-pop" class="back hide">
            <div class="pop_box">
                <div class="pop_up">
                    <p>当前席位坐满后才能添加哦</p>
                    <span class="close iconfont icon-cancel"></span>
                </div>
            </div>
        </div>
    </div>
    <div class="ranking-box">
        <div class="ranking_list">
            <div class="top text-btn">
                <p>囍宴排行榜</p>
            </div>
            <div class="rank-box">
                <ul>
                    <li class="clearfix">
                        <div class="ranking fl">1
                            <span class="crown1 iconfont icon-huangguan"></span>
                        </div>
                        <div class="head_portrait fl"><img src="../img/touxiang1.png" alt=""></div>
                        <div class="name fl">xxx</div>
                        <div class="visitors fr"><span class="rank">30</span>位客宾</div>
                    </li>
                    <li class="clearfix">
                        <div class="ranking fl">2
                            <span class="crown2 iconfont icon-huangguan"></span>
                        </div>
                        <div class="head_portrait fl"><img src="../img/touxiang2.png" alt=""></div>
                        <div class="name fl">xxx</div>
                        <div class="visitors fr"><span class="rank">60</span>位客宾</div>
                    </li>
                    <li class="clearfix">
                        <div class="ranking fl">3
                            <span class="crown3 iconfont icon-huangguan"></span>
                        </div>
                        <div class="head_portrait fl"><img src="../img/touxiang3.png" alt=""></div>
                        <div class="name fl">xxx</div>
                        <div class="visitors fr"><span class="rank">100</span>位客宾</div>
                    </li>
                    <li class="clearfix">
                        <div class="ranking fl">4</div>
                        <div class="head_portrait fl"><img src="../img/touxiang1.png" alt=""></div>
                        <div class="name fl">xxx</div>
                        <div class="visitors fr"><span class="rank">35</span>位客宾</div>
                    </li>
                    <li class="clearfix">
                        <div class="ranking fl">5</div>
                        <div class="head_portrait fl"><img src="../img/touxiang1.png" alt=""></div>
                        <div class="name fl">xxx</div>
                        <div class="visitors fr"><span class="rank">86</span>位客宾</div>
                    </li>
                    <li class="clearfix">
                        <div class="ranking fl">6</div>
                        <div class="head_portrait fl"><img src="../img/touxiang1.png" alt=""></div>
                        <div class="name fl">xxx</div>
                        <div class="visitors fr"><span class="rank">56</span>位客宾</div>
                    </li>
                    <li class="clearfix">
                        <div class="ranking fl">7</div>
                        <div class="head_portrait fl"><img src="../img/touxiang1.png" alt=""></div>
                        <div class="name fl">xxx</div>
                        <div class="visitors fr"><span class="rank">30</span>位客宾</div>
                    </li>
                    <li class="clearfix">
                        <div class="ranking fl">8</div>
                        <div class="head_portrait fl"><img src="../img/touxiang1.png" alt=""></div>
                        <div class="name fl">xxx</div>
                        <div class="visitors fr"><span class="rank">79</span>位客宾</div>
                    </li>
                    <li class="clearfix">
                        <div class="ranking fl">9</div>
                        <div class="head_portrait fl"><img src="../img/touxiang1.png" alt=""></div>
                        <div class="name fl">xxx</div>
                        <div class="visitors fr"><span class="rank">40</span>位客宾</div>
                    </li>
                    <li class="clearfix">
                        <div class="ranking fl">10</div>
                        <div class="head_portrait fl"><img src="../img/touxiang1.png" alt=""></div>
                        <div class="name fl">xxx</div>
                        <div class="visitors fr"><span class="rank">79</span>位客宾</div>
                    </li>
                    <li class="clearfix">
                        <div class="ranking fl">11</div>
                        <div class="head_portrait fl"><img src="../img/touxiang1.png" alt=""></div>
                        <div class="name fl">xxx</div>
                        <div class="visitors fr"><span class="rank">40</span>位客宾</div>
                    </li>
                    <li class="clearfix">
                        <div class="ranking fl">12</div>
                        <div class="head_portrait fl"><img src="../img/touxiang1.png" alt=""></div>
                        <div class="name fl">xxx</div>
                        <div class="visitors fr"><span class="rank">79</span>位客宾</div>
                    </li>
                    <li class="clearfix">
                        <div class="ranking fl">13</div>
                        <div class="head_portrait fl"><img src="../img/touxiang1.png" alt=""></div>
                        <div class="name fl">xxx</div>
                        <div class="visitors fr"><span class="rank">40</span>位客宾</div>
                    </li>
                    <li class="clearfix">
                        <div class="ranking fl">14</div>
                        <div class="head_portrait fl"><img src="../img/touxiang1.png" alt=""></div>
                        <div class="name fl">xxx</div>
                        <div class="visitors fr"><span class="rank">79</span>位客宾</div>
                    </li>
                    <li class="clearfix">
                        <div class="ranking fl">15</div>
                        <div class="head_portrait fl"><img src="../img/touxiang1.png" alt=""></div>
                        <div class="name fl">xxx</div>
                        <div class="visitors fr"><span class="rank">40</span>位客宾</div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<script src="../js/jquery.js" type="text/javascript" charset="UTF-8"></script>
<script src="../js/common.js" type="text/javascript" charset="UTF-8"></script>
<script src="../js/desk.js" type="text/javascript" charset="UTF-8"></script>
<script src="../js/pop-up.js" type="text/javascript" charset="UTF-8"></script>
</body>
</html>